<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .radioBox{display: flex;}
    .radio{position: relative;width: 20px;height: 20px;margin: 0 10px;cursor: pointer;}
    .radio span{position: absolute;width: 10px;height: 16px;background: #ccc;border-radius: 5px 5px 0 0;}
    .radio span:nth-child(1){transform: rotate(45deg);margin-left: 4px;}
    .radio span:nth-child(2){transform: rotate(-45deg);}

    .radio.active span{background: red;}
  </style>
</head>
<body>
  <input type="radio" name="sex">
  <input type="radio" name="sex">

  <div class="radioBox">
    <div class="radio">
      <span></span>
      <span></span>
    </div>
    <div class="radio">
      <span></span>
      <span></span>
    </div>
  </div>
</body>
<script>

  var radios = document.querySelectorAll(".radioBox .radio");

  for(var i=0; i<radios.length; i++){
    radios[i].onclick = function(){
      // 循环内绑定事件，事件内无法通过循环的计数器获取当前元素
      // console.log(radios[i]);
      // 重新遍历，找到所有单选框元素
      for(var j=0;j<radios.length; j++){
        // 取消高亮样式
        radios[j].classList.remove("active")
      }
      // 关键字：this 可以获取当前触发事件的元素
      // console.log(this)
      // 给当前触发事件的单选框添加高亮样式
      this.classList.add("active");
    }
  }

</script>
</html>